import React, { useEffect, useState } from 'react'
import axios from "axios"
import "./Duanzi.css"
export default function Duanzi() {
    let [duanzi, setDuanzi] = useState([])
    let [value, setvalue] = useState(false)
    let [itea,setitea] = useState({})
    useEffect(() => {
        axios({
            method: "get",
            url: "http://api.xiaohigh.com/duanzi"
        }).then((res) => {
            console.log(res);
            setDuanzi(res.data)
        }, (rej) => {

        })

    }, [])
    // 改变状态
    let changevalue = (value) => {
        return ()=>{
            setvalue(true)
            setitea(value)
        }
       
    }
    // 关闭模态框
    let closkuang = () => {
        setvalue(false)
    }
    return (
        <ul className='duanzi'>
            {
                duanzi.map((iteam) => {
                    return <li key={iteam.id} onClick={changevalue(iteam)}>
                        <h2>{iteam.name}</h2>
                        <p>{iteam.text.length>100?iteam.text.slice(0,190)+"...":iteam.text}</p>

                    </li>

                })
            }
            {
                value ? <> <div className='model'>

                    <div>
                        <h2 onClick={closkuang}>X</h2>
                        <h1>{itea.name}</h1>
                        <p>{itea.text}</p>
                    </div>
                </div>
                </> : null

            }


        </ul>
    )
}
